<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-input
        v-model.trim="listQuery.userId"
        clearable
        placeholder="请输入用户ID"
      />
      <el-input
        v-model.trim="listQuery.username"
        clearable
        placeholder="请输入昵称"
      />
      <el-select
        v-model="listQuery.relegationStatus"
        clearable
        filterable
        placeholder="升降类型"
        style="width:100px"
      >
        <el-option label="用户升级真人" value="1" />
        <el-option label="真人升级女神" value="2" />
        <el-option label="用户升级女神" value="3" />
        <el-option label="女神降级真人" value="4" />
        <el-option label="真人降级用户" value="5" />
        <el-option label="女神降级用户" value="6" />
      </el-select>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        clearable
        @change="daterangeChangedTimestamp"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >重置</el-button>
      <el-button
        type="warning"
        @click="exportExcel('#anchorListSecond', '升降变化')"
      >导出</el-button>
    </div>

    <div class="cs-filter-result">
      <el-table
        id="anchorListSecond"
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 350px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column align="center" label="用戶id">
          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.accountId" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="用户昵称" prop="nickName" />
        <el-table-column align="center" label="升降类型">
          <template slot-scope="{ row }">{{ relegation_status_items[row.relegationStatus] }}</template>
        </el-table-column>
        <el-table-column align="center" label="升降原因" prop="reason" />
        <el-table-column align="center" label="升降时间">
          <template slot-scope="{ row }">{{
            row.dateTime | parseTime
          }}</template>
        </el-table-column>
        <el-table-column align="center" label="操作" fixed="right" width="160">
          <template slot-scope="{ row }">
            <el-button
              v-if="row.userId !== 0"
              type="primary"
              size="mini"
              @click="onGoDetail(row.userId)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChangeOffset"
      />
    </div>
  </div>
</template>
<script>
import TablePagination from '@/components/TablePagination'
import { xhrAnchorLiftingRecord } from '@/api/account'
import DATEPICKER_OPTIONS from '@/config/datepickerOptions'

export default {
  name: 'AnchorListSecond',
  components: { TablePagination },
  data() {
    return {
      list: null,
      total: 0,
      relegation_status_items: {
        1: '用户升级真人', 2: '真人升级女神', 3: '用户升级女神', 4: '女神降级真人', 5: '真人降级用户', 6: '女神降级用户'
      },
      daterangeValue: '',
      daterangePickerOptions: DATEPICKER_OPTIONS.daterangePickerOptions,
      listQuery: {
        page: 1,
        limit: 100,
        startTime: null,
        endTime: null,
        relegationStatus: null,
        username: null,
        userId: (this.$route.query && this.$route.query.id) || null
      },
      userDetail: null,
      listLoading: true,
      dialogLoading: true,
      dialogVisible: false
    }
  },
  created() {
    this.doSearch()
  },
  methods: {
    doSearch() {
      if (this.listQuery.userId && !/^\d*$/.test(this.listQuery.userId)) {
        this.$message.warning('用户ID只能是数字')
        this.listLoading = false
        return
      }
      xhrAnchorLiftingRecord(this.listQuery)
        .then(resp => {
          this.list = resp.data.list
          this.total = resp.data.count
          this.listLoading = false
        })
        .catch(err => {
          this.$message.error(err)
          this.listLoading = false
        })
    }
  }
}
</script>
<style scoped>

</style>
